<script>
export default {
  name: "SelectSites"
}
</script>

<script setup>
import {apiGetPlatformSites} from "@/api/public";

const props = defineProps({
  valueKey: {
    type: String,
    default: 'site_id'
  },
  labelKey: {
    type: String,
    default: 'site_abbrev'
  }
})


const optionsList = ref([])

const initOptionsList = async () => {
  const res = await apiGetPlatformSites()
  optionsList.value = res.data
}

onMounted(() => {
  initOptionsList()
})

defineExpose({
  optionsList
})


</script>

<template>
  <el-select v-bind="$attrs" filterable class="select-wrap">
    <el-option
        v-for="item in optionsList"
        :key="item[valueKey]"
        :label="item[labelKey]"
        :value="item[valueKey]"
    />
  </el-select>
</template>

<style scoped lang="scss">

</style>